<template>
  <div class="user-manage">
    <el-table
      v-loading="$store.state.loading.loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.8)"
      :data="filterUserList"
      border
      style="width: 100%"
    >
      <el-table-column align="center" prop="username" label="用户名">
      </el-table-column>
      <el-table-column
        align="center"
        prop="nickName"
        label="昵称"
      ></el-table-column>
      <el-table-column align="center" prop="password" label="密码">
      </el-table-column>
      <el-table-column align="center" prop="email" label="邮箱">
      </el-table-column>
      <el-table-column align="center" prop="isAdmin" label="身份">
        <template v-slot="scope">
          <el-tag size="medium" type="danger" v-if="scope.row.isAdmin"
            >管理员</el-tag
          >
          <el-tag size="medium" v-else>普通用户</el-tag>
        </template>
      </el-table-column>

      <el-table-column>
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>

        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleDialogVisible(scope.row)"
            >编辑</el-button
          >
          <el-button
            @click="handleDeleteUser(scope.row)"
            type="text"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginationMsg.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="paginationMsg.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="+paginationMsg.total"
      style="margin: 10px 0"
    >
    </el-pagination>
    <user-manage-eitor-dialog
      :getUserListMsg="getUserListMsg"
      :paginationMsg="paginationMsg"
      :userMsg="userMsg"
      :dialogVisible="userManageEitorDialogVisible"
      :handleDialogVisible="handleDialogVisible"
      :colseDialogVisible="colseDialogVisible"
    ></user-manage-eitor-dialog>
  </div>
</template>

<script>
import UserManageEitorDialog from "@/views/home/components/UserManageEitorDialog";
import { getUserList, deleteUser } from "@/apis/home";
export default {
  components: {
    UserManageEitorDialog,
  },
  mounted() {
    const { pageNum, pageSize } = this.paginationMsg;
    this.getUserListMsg(pageNum, pageSize);
  },

  methods: {
    handleDialogVisible(userMsg) {
      this.userManageEitorDialogVisible = !this.userManageEitorDialogVisible;
      if (userMsg) {
        this.userMsg = userMsg;
      }
    },
    colseDialogVisible() {
      this.userManageEitorDialogVisible = false;
      this.$message.info(`已取消${this.typeMsg}`);
    },
    handleDeleteUser(row) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deleteUser(row.id);
          this.getUserListMsg();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      const { pageNum } = this.paginationMsg;
      this.getUserListMsg(pageNum, val);
    },
    handleCurrentChange(val) {
      const { pageSize } = this.paginationMsg;
      this.getUserListMsg(val, pageSize);
    },
    async getUserListMsg(pageNum, pageSize) {
      const { data } = await getUserList(pageNum, pageSize);
      this.userList = data.list;
      this.paginationMsg = data;
      this.totalReserve = this.paginationMsg.total;
    },
  },
  computed: {
    filterUserList() {
      if (!this.search) {
        this.paginationMsg.total = this.totalReserve;
        return this.userList;
      }
      let myUserList = this.userList.filter(
        (user) =>
          !this.search ||
          user.username.toLowerCase().includes(this.search.toLowerCase())
      );
      this.paginationMsg.total = myUserList.length;
      return myUserList;
    },
  },

  data() {
    return {
      search: "",
      userList: [],
      paginationMsg: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        totalPage: 0,
      },
      totalReserve: 0,
      userManageEitorDialogVisible: false,
      userMsg: {
        id: "",
        email: "",
        isAdmin: 0,
        nickName: "",
        password: 0,
        useranme: "",
      },
    };
  },
  watch: {
    search(newVal, oldVal) {
      if (newVal.length === 0 && oldVal.length === 1) {
        this.paginationMsg.total = this.totalReserve;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.user-manage {
  width: 100%;
  height: 100%;
}
</style>
